import React from 'react'
import styles from './style.module.css'

import headImg from '../../assets/golive/pic_tx.png'
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux'

function Index(props) {
    const {history, users, onClick, requestDemo} = props;

    console.log(props);
    return (
        <div>
            <div className={styles.bgImg}>
                <img src={headImg} alt="" style={{
                    width: '100px',
                    height: '100px'
                }} onClick={onClick}/>
            </div>

            <div className={styles.card} style={{padding: '10px', textAlign: 'center', fontWeight: 600}}
                 onClick={requestDemo}>
                {users.username} {users.status}
            </div>

            <div className={styles.card}>
                <div onClick={() => {
                    history.push('/order/list');
                }}>
                    <div className={styles.item}><i className={"iconfont icon-shopping-fill"}/> 我的订单</div>
                    <i className={`iconfont icon-right ${styles.right}`}/>
                </div>
                <div onClick={() => {
                    history.push('/me/addr/list');
                }}>
                    <div className={styles.item}><i className={"iconfont icon-apartment"}/> 收货地址管理</div>
                    <i className={`iconfont icon-right ${styles.right}`}/>
                </div>
                <div onClick={() => {
                    history.push('/me/coupon');
                }}>
                    <div className={styles.item}>
                        <i className={"iconfont icon-moneycollect-fill"}/>优惠卷/抵用卷
                    </div>
                    <i className={`iconfont icon-right ${styles.right}`}/>
                </div>
            </div>

            <div className={styles.card}>
                <div onClick={() => {
                    history.push('/me/collect');
                }}>
                    <div className={styles.item}><i className={"iconfont icon-heart"}/> 我的收藏</div>
                    <i className={`iconfont icon-right ${styles.right}`}/>
                </div>
                <div onClick={() => {
                    history.push('/me/browse');
                }}>
                    <div className={styles.item}><i className={"iconfont icon-file-text-fill"}/>浏览记录</div>
                    <i className={`iconfont icon-right ${styles.right}`}/>
                </div>
            </div>
        </div>
    );
}


const mapStateToProps = (state) => {
    return {
        users: state.users
    }
};

const mapDispatchToProps = (dispatch) => { // 默认传递参数就是dispatch
    return {
        onClick: () => {
            console.log('onClick');
            dispatch({
                type: 'user-demo'
            });
        },
        requestDemo: () => {
            dispatch({
                type: 'user-saga'
            });
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index))
